<template>
  <div class="flex flex-row p-4" v-cssvar="555" style="border-bottom: solid 1px rgb(239, 239, 245);" >
        <img :src=logoimg class="h-6" />
        <div class="ml-4 flex flex-row flex-wrap flex-grow-[1]">
          <div class="w-20 text-center">首页</div>
          <div class="w-20 text-center">动态</div>
          <div class="w-20 text-center">关于</div>
          <div class="w-20 text-center">图片墙</div>
        </div>
        <n-config-provider :theme="theme">
      <n-space>
        <n-button @click="theme = darkTheme">深色</n-button>
        <n-button @click="theme = undefined">浅色</n-button>
      </n-space>
  </n-config-provider>
      </div>
</template>
<script lang="ts" setup>
import logoimg from "@/assets/logo.png";
import { defineComponent, ref } from 'vue'
import { darkTheme } from 'naive-ui'
import { BuiltInGlobalTheme } from "naive-ui/lib/themes/interface";
let theme= ref<BuiltInGlobalTheme>()
</script>
